<template>
  <div class="container" style="background:#dde2e7">

    <el-row>
    <el-col :span="24">
        <div class="grid-content bg-purple-dark">
            <div style="float:right;">
                <p  style="float:left; height: 50px; line-height: 50px;">
                     <el-input v-model="inp1" >
                <i class="el-icon-search"></i>
               </el-input>  
                </p>&emsp;
             
             <p  style="float:left; height: 50px; line-height: 50px;font-size:1.5rem">
                   <span>&emsp;|&emsp;<i class="el-icon-bell"></i>&emsp;    </span> 
             </p>
             <p  style="float:left; height: 50px; line-height: 50px;">
                <img :src="imgSrc" alt="">&emsp;
             </p>
                <p  style="float:left; height: 50px; line-height: 50px;">
               <span>管理员</span>
             </p>
            </div>
        </div>
    </el-col>
    </el-row>
<div id="sibgfu">
     <div id="sibg" v-for="(item,index) in arr" :key="index" v-bind:style="{ 'background-image': 'url(' + item.url+ ')','background-repeat':'no-repeat','background-size':'cover' }">
       
             <h1>{{item.num}}</h1>
             <p>{{item.str}}</p> 
     
  </div>
</div>
  
  <div>
      <el-container>
        <el-aside width="60%" height="300px">
          <h3 style="text-align:left;padding-left:10px;line-height:40px"><span style="font-size:20px">|</span>硬件概览</h3>
          <div style="width:35%;border-right:1px solid #666;float:left">

        <Echart-chart2 :ids="1" :obj="echart_obj"></Echart-chart2>
          <Echart-chart2 :ids="2" :obj="echart_obj2"></Echart-chart2>
           </div>
           <div  style="float:left">
                 <Echart-chart :xdata="xdata" :ydata="ydata" :ids="11" :type="bar"></Echart-chart>
           </div>
        </el-aside>
        <el-main width="40%" height="300px">
            
            Main
        </el-main>
       </el-container>
  </div>

  </div>
</template>

<script>
import EchartChart2 from '../../components/echarts/EchartChart2.vue'
import EchartChart from '../../components/echarts/EchartChart.vue'
export default {
  data() {
    return {
        inp1:'',
        imgSrc:require('../../assets/erdaoimg/1.png'),
        imgSrcs:[require('../../assets/erdaoimg/tu1.png'),require('../../assets/erdaoimg/tu2.png'),require('../../assets/erdaoimg/tu3.png'),require('../../assets/erdaoimg/tu4.png'),],
        arr:[],
        echart_obj:{
             tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
    bottom:'5%',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '在线 70%' },
        { value: 735, name: '离线 30%' },
      ]
    }
    ]
   },
       echart_obj2:{
             tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '正常 70%' },
        { value: 735, name: '异常 30%' },
      ]
    }
  ]
        },  
          bar:'bar',
        line:'line',
          xdata: [],
          ydata: [],  
    }
  },
  methods:{
      fun1(){
          this.$apiGet('http://47.94.4.201/index.php/index/index/getMoreList').then((res)=>{
            // console.log(res)
            if(res.code==0){
                res.data.forEach((item,index) => {
                    // console.log(item)
                    let obj = {
                        num: item.num,
                        str: item.str,
                        status:item.status,
                        url:this.imgSrcs[index]
                    };
                    this.arr.push(obj)
                });
            
             
            }else{
                alert('获取失败')
            }
          })
      },
     async fun2(){
         var obj1 = await this.$apiGet('http://47.94.4.201/index.php/index/index/getDatas')
              console.log(obj1)
                 console.log(JSON.parse(JSON.stringify(obj1.data.arr)))
                 JSON.parse(JSON.stringify(obj1.data.arr))
                    this.xdata =[...obj1.data.arr]
                 console.log(this.xdata) 
                                            
         
      }
  },
  mounted(){
    this.fun1()
    this.fun2()
  },
  components: {
      EchartChart2,
      EchartChart,
  }
}
</script>

<style scoped>
*{
    margin:0;
    padding: 0;
}
  .bg-purple-dark {
      width: 100%;
      height: 50px;
      line-height: 50px;
    background: #fff;
  }
  .el-input__inner{
      width:25%;
      height:30px
  }
  #sibgfu{
      width: 100%;
      display: flex;
      display: -webkit-flex;
  }
#sibgfu #sibg{
    width: 20%;
    height:100px;
    border: 1px solid red;
    background-position: center;
    background-size: cover;
    margin:20px;
    flex-grow: 1;
    color: #fff;
    line-height:40px;
    padding-top:20px;
}

.el-aside{
background: #fff;
margin: 20px;
}
.el-main{
    background: #fff;
    margin: 20px;
}
</style>
